<template>
  <div class="con-body">
    <div class="bcwj" v-if="isCon">
      <div class="addbtn" @click="conAdd()">新增</div>
      <div class="tables">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: 'rgba(40, 94, 117,0.8)' }"
          style="width: 100%"
          height="100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="date" label="分组名称" width="280">
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="handleLook(scope.$index, scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <el-dialog
          title="修改分组名"
          :visible.sync="dialogFormControl"
          width="400px"
        >
          <el-form :model="conForm">
            <el-form-item label="分组名称" :label-width="formLabelWidth">
              <el-input v-model="conForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogNone">取 消</el-button>
            <el-button type="primary" @click="dialogSave()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 增加 -->
    <div class="cont" v-if="!isCon">
      <div class="conadd-title">
        <img src="../assets/img/add/title1.png" alt="" />
      </div>
      <div class="addname">
        <el-input placeholder="请输入编程文件名称" v-model="add1" clearable>
        </el-input>
      </div>
      <div class="conadd-title a">
        <img src="../assets/img/add/title2.png" alt="" />
      </div>
      <div class="addname">
        <el-input placeholder="请输入编程文件名称" v-model="add2" clearable>
        </el-input>
      </div>
      <div class="conadd-title">
        <img src="../assets/img/add/title3.png" alt="" />
      </div>
      <!-- 外层 -->
      <div class="conadd-box">
        <div class="conadd-item">
          <span>时间</span>
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in timer"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分类</span>
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分组</span>
          <el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in group"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>执行</span>
          <el-select v-model="value4" placeholder="请选择">
            <el-option
              v-for="item in run"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="debtn">删除</div>
        </div>
        <!-- 第二个 -->
        <div class="conadd-item">
          <span>时间</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分类</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分组</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>执行</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="debtn">删除</div>
        </div>
        <!-- 第三个 -->
        <div class="conadd-item">
          <span>时间</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分类</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分组</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>执行</span>
          <el-select v-model="stop" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="debtn">删除</div>
        </div>
        <!-- 增加 -->
        <div class="conadd-item">
          <span>时间</span>
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in timer"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分类</span>
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>分组</span>
          <el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in group"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>执行</span>
          <el-select v-model="value4" placeholder="请选择">
            <el-option
              v-for="item in run"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="addbtn" style="background-color: #4595c8">增加</div>
        </div>
      </div>

      <!-- 按钮 -->
      <div class="btn-box">
        <div class="save" @click="save"></div>
        <div class="none" @click="none"></div>
      </div>
    </div>
  </div>
</template>

<script>
import ConAdd from "../components/ConAdd.vue";
export default {
  name: "control",
  data() {
    return {
      // 显示弹窗
      dialogFormControl: false,
      formLabelWidth: "90px",
      conForm: {
        name: "",
      },
      tableData: [
        {
          id: 0,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 1,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },

        {
          id: 2,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      isCon: true,
      add1: "",
      add2: "",
      // 下拉框绑定
      timer: [
        {
          value: "1",
          label: "10:00",
        },
        {
          value: "2",
          label: "11:00",
        },
        {
          value: "3",
          label: "12:00",
        },
        {
          value: "4",
          label: "15:00",
        },
      ],
      value1: "",
      type: [
        {
          value: "1",
          label: "靶车",
        },
        {
          value: "2",
          label: "靶标",
        },
      ],
      value2: "",
      group: [
        {
          value: "1",
          label: "分组一",
        },
        {
          value: "2",
          label: "分组二",
        },
        {
          value: "3",
          label: "分组三",
        },
        {
          value: "4",
          label: "分组四",
        },
      ],
      value3: "",
      run: [
        {
          value: "1",
          label: "显靶",
        },
        {
          value: "2",
          label: "隐靶",
        },
        {
          value: "3",
          label: "旋转",
        },
      ],
      value4: "",
    };
  },
  components: {
    ConAdd,
  },
  mounted() {},
  methods: {
    // 表格选中
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    //获取查询行
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormControl = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该分组，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const tempArr = [];
          this.tableData.forEach((ele) => {
            console.log("ele", ele.id);
            console.log("index", index);

            if (ele.id !== index) {
              tempArr.push(ele);
            }
          });
          this.tableData = tempArr;
          // row = ''
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleLook(index, row) {
      alert(row);
    },
    // 弹窗
    dialogSave() {
      // this.form.name =
      // let a = sessionStorage.getItem("item");
      // console.log(a);
      // this.bbtableData.bbgroupname[a] = this.form.name
      this.dialogFormControl = false;
    },
    dialogNone() {
      this.dialogFormControl = false;
    },
    // 新增页面
    conAdd() {
      this.isCon = !this.isCon;
    },
    // 保存
    save() {
      this.isCon = !this.isCon;
    },
    none() {
      return;
    },
  },
};
</script>

<style scoped lang="less">
.con-body {
  flex: 1;
  height: 98vh;
  // box-sizing: border-box;
  // background-color: #00ccff;
  margin-top: 5px;
  position: relative;
}
.bcwj {
  margin: 95px 20px 0 10px;
  height: 88vh;
  background-image: url("../assets/img/add/bcwjbg.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 100px;
  .tables {
    width: 90%;
    height: 68vh;
    overflow-y: auto;
    margin: 62px 0 0 44px;

    //   修改透明背景
    /deep/ .el-table,
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
      background-color: transparent;
      color: #fff;
    }
    //   取消表格内行下边框
    /deep/ .el-table td.el-table__cell {
      border: none;
    }
    //   取消表头下边框
    /deep/ .el-table th.el-table__cell.is-leaf {
      border: none;
    }
    /deep/ .el-table--border {
      border: none;
    }
    // 取消最底下下边框
    /deep/ .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
    //   修改按钮间距
    /deep/ .el-button--mini {
      margin-right: 100px;
    }
    /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #053d91bd;
      /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
    }
  }
  .addbtn {
    position: absolute;
    box-sizing: border-box;
    width: 80px;
    height: 30px;
    background-color: aqua;
    left: 87%;
    top: 200px;
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
    background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));
    border: 1px solid #00ccff;
    color: #fff;
    cursor: pointer;
  }
}
.cont {
  width: 98%;
  margin: 95px 20px 0 10px;
  height: 88vh;
  padding-top: 10px;
  box-sizing: border-box;
  .conadd-title {
    margin-top: 20px;
    width: 225px;
    height: 40px;
    margin-left: 40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .a {
    width: 250px;
  }
  .addname {
    /deep/ .el-input {
      width: 400px;
      height: 40px;
      margin-top: 15px;
      margin-left: 40px;
      border: #00ccff;
    }
    // 修改输入框样式
    /deep/ .el-input__inner {
      height: 40px;
      font-size: 14px;
      color: #fff;
      border: 1px solid #0c61ab;
      // border: none;
      text-align: center;
      line-height: 0px;
      background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));
    }
    /deep/ input::placeholder {
      font-size: 12px;
    }
    .con-active {
      background: linear-gradient(
        0deg,
        rgba(209, 133, 66, 0.4),
        rgba(209, 147, 66, 0.05)
      );
      border: 1px solid #ff9752;
    }
  }
  .conadd-box {
    width: 80%;
    height: 420px;
    .conadd-item {
      display: flex;
      height: 30px;
      justify-content: space-around;
      line-height: 30px;
      width: 90%;
      color: #fff;
      margin-top: 10px;
      margin-bottom: 20px;
      span {
        height: 30px;
        margin-right: -60px;
      }
      .debtn,
      .addbtn {
        width: 70px;
        height: 30px;
        background-color: #ff9752;
        text-align: center;
        line-height: 30px;
        border-radius: 3px;
        cursor: pointer;
      }

      /deep/ .el-select,
      /deep/ .el-input,
      /deep/ .el-input__inner {
        background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));

        color: #fff;
        border: 0px;
        border-radius: 5px;
        text-align: center;
        width: 160px;
        height: 25px;
      }
      //修改的是el-input上下的⼩图标的颜⾊
      /deep/ .el-select .el-input .el-select__caret {
        color: #fff;
      }

      //修改的是下拉框选项内容上⽅的尖⾓
      /deep/ .el-popper .popper__arrow,
      .el-popper .popper__arrow::after {
        display: none;
      }

      // 修改下拉框字体
      /deep/ .el-input__inner,
      .el-textarea__inner {
        font-size: 14px;
      }
      // 修改下拉箭头
      /deep/ .el-input__icon {
        height: 120%;
        line-height: 20px;
      }
      /deep/ .el-input__suffix {
        height: auto;
      }
    }
  }

  .btn-box {
    width: 400px;
    height: 40px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    .save {
      width: 160px;
      height: 100%;
      background-image: url("../assets/img/add/saves.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .none {
      width: 160px;
      height: 100%;
      background-image: url("../assets/img/add/none.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1300px) {
  .bcwj {
    margin: 55px 20px 0 10px;
    height: 87vh;
    .tables {
      height: 54vh;
      margin-top: 10px;
      margin-left: 10px;
    }
    .addbtn {
      left: 83%;
      top: 100px;
    }
  }
  .cont {
    margin: 75px 20px 0 0px;
    padding-top: 5px;
    height: 81vh;
    .conadd-title {
      margin-top: 10px;
      width: 160px;
      height: 30px;
      margin-left: 10px;
    }
    .a {
      width: 180px;
    }
    .addname {
      /deep/ .el-input {
        width: 300px;
        height: 30px;
        margin-top: 15px;
        margin-left: 10px;
        border: #00ccff;
      }
      // 修改输入框样式
      /deep/ .el-input__inner {
        height: 30px;
        font-size: 14px;
      }
    }
    .conadd-box {
      width: 90%;
      height: 180px;
      overflow-y: auto;
      margin-left: 10px;
      .conadd-item {
        display: flex;
        height: 30px;
        justify-content: space-between;
        line-height: 30px;
        width: 98%;
        color: #fff;
        margin-top: 10px;
        margin-bottom: 20px;
        span {
          height: 30px;
          margin-right: -10px;
        }
        .debtn,
        .addbtn {
          width: 70px;
          height: 30px;
        }

        /deep/ .el-select,
        /deep/ .el-input,
        /deep/ .el-input__inner {
          width: 100px;
        }
      }
    }
    .btn-box {
      width: 350px;
      height: 40px;
      margin: 20px auto 0;
      display: flex;
      justify-content: space-between;
      .save {
        width: 160px;
        height: 100%;
        background-image: url("../assets/img/add/saves.png");
        background-size: 100% 100%;
        cursor: pointer;
      }
      .none {
        width: 160px;
        height: 100%;
        background-image: url("../assets/img/add/none.png");
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
